<!--
 * @Author: wankong
 * @Desc: 
 * @Date: 2021-10-10 20:12:33
 * @LastEditTime: 2021-10-19 18:30:27
-->
<template>
  <div class="article">
    <el-row :gutter="20" type="flex" justify="center">
      <el-col :span="2">&nbsp; </el-col>
      <el-col :span="4">
        <el-select v-model="query.cateid" placeholder="分类">
          <el-option label="请选择" :disabled="true" value="0"> </el-option>
          <el-option
            v-for="cate in cateList"
            :key="cate.id"
            :label="cate.catename"
            :value="cate.id"
          >
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-select placeholder="状态" v-model="query.status">
          <el-option label="未发布" value="0"> </el-option>
          <el-option label="已发布" value="1"> </el-option
        ></el-select>
      </el-col>
      <el-col :span="4">
        <el-input
          placeholder="关键字"
          clearable
          v-model="query.keyword"
          @clear="getArtList()"
        ></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="getArtList()">查询 </el-button>
      </el-col></el-row
    >
    <div class="dataTable">
      <el-table
        :data="artList"
        style="width: 100%"
        :default-sort="{ prop: 'lasttime', order: 'descending' }"
      >
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column label="查看" width="80">
          <template slot-scope="scope">
            <el-link @click="goView(scope.row)">
              <i class="el-icon-view"></i
            ></el-link>
          </template>
        </el-table-column>
        <el-table-column label="分类" width="80">
          <template slot-scope="scope">
            <el-link>{{ scope.row.cate.catename }}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="lasttime"
          label="时间"
          :formatter="timeFormatter"
          sortable
          width="190"
        >
        </el-table-column>
        <el-table-column prop="views" label="阅读量" width="100" sortable>
        </el-table-column>
        <el-table-column label="功能" width="200"
          ><template slot-scope="scope">
            <el-button @click="editrArt(scope.row)" type="warning"
              >修改</el-button
            >
            <el-button @click="delArt(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination
          hide-on-single-page
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="pageChange"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      artList: [],
      query: {
        limit: 10,
        pages: 1,
        keyword: "",
        cateid: "",
        status: "",
      },
      total: 50,
      cateList: [],
    };
  },
  methods: {
    async getCateList() {
      const res = await this.$http.get("cate");
      this.cateList = res.data;
    },
    async getArtList() {
      const res = await this.$http.get(`${this.adminPre}/blog`, {
        params: this.query,
      });
      this.total = res.data.total;
      this.artList = res.data.lists;
    },
    pageChange(nowpage) {
      this.query.pages = nowpage;
      this.getArtList();
    },
    timeFormatter(row) {
      let value = row.lasttime;
      if (!value) return "";
      value = value.toString();
      return value.replace("T", " ").replace(".000+00:00", " ");
    },
    async delArt(art) {
      this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          const res = await this.$http.delete(
            `${this.adminPre}/blog/${art.id}`
          );
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getArtList();
          } else {
            this.$message({
              type: "info",
              message: "删除失败!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editrArt(art) {
      this.$router.push({
        path: "/home/editor",
        query: { artid: art.id },
      });
    },
    goView(row) {
      const url = this.$router.resolve(`/article/${row.id}`);
      window.open(url.href, "_blank");
    },
  },
  created() {
    this.getCateList();
    this.getArtList();
  },
};
</script>

<style>
</style>